<!--
 * @Description: 疯狂星期五商品查看编辑
 * @Author: liyujie
 * @Date: 2021/05/28
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/05/28
-->
<template>
    <div class="wrapper crazy-friend-goods-edit">
        <div
            class="content-wrapper"
            v-if="ruleForm"
        >
            <!-- header -->
            <div class="header">
                <div class="header-title">
                    疯狂星期五 - {{ type === 'edit' ? '编辑商品' : '查看商品' }}
                </div>
            </div>
            <!-- /header -->
            <div class="goods-wrapper">
                <div class="goods-wrapper__header status">
                    <span>活动报名进度：<span :class="ruleForm.verify === 1 ? 'success' : ruleForm.verify === -1 ? 'danger' : 'normal'">{{ ruleForm.verify | verifyStatusFilter }}</span></span>
                </div>
                <div class="goods-wrapper__content">
                    <el-table
                        :data="[ruleForm]"
                        style="width: 100%;"
                        class="data-table"
                        :row-style="{height: '130px'}"
                    >
                        <el-table-column
                            width="280"
                            label="商品信息"
                            fixed="left"
                        >
                            <template slot-scope="scope">
                                <div class="goods-info">
                                    <img
                                        :src="scope.row.goods_cover"
                                        class="goods-cover"
                                        @click="fnShowPreview(scope.row.goods_cover)"
                                    >
                                    <div class="info">
                                        <div class="goods-info__title">
                                            {{ scope.row.goods_title }}
                                        </div>
                                        <div class="goods-info__no">
                                            商品编号：{{ scope.row.goods_no }}
                                        </div>
                                        <div class="goods-info__shop-title">
                                            店铺名称：{{ scope.row.shop_title }}
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="goods_type"
                            label="类目"
                            show-overflow-tooltip
                            align="center"
                            :formatter="emptyFormatter"
                        />
                        <el-table-column
                            prop="goods_stock"
                            label="实际库存"
                            show-overflow-tooltip
                            align="center"
                            :formatter="emptyFormatter"
                        />
                        <el-table-column
                            label="限购数量"
                            show-overflow-tooltip
                            align="center"
                            :formatter="emptyFormatter"
                        >
                            <template slot-scope="scope">
                                {{ scope.row.buy_limit_count === -1 ? '不限' : scope.row.buy_limit_count }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="goods_price"
                            label="商品单价"
                            show-overflow-tooltip
                            align="center"
                            :formatter="emptyFormatter"
                        />
                        <el-table-column
                            label="佣金"
                            show-overflow-tooltip
                            align="center"
                            :formatter="emptyFormatter"
                        >
                            <template slot-scope="scope">
                                {{ scope.row.goods_commission_rate }}%
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="其他优惠"
                            show-overflow-tooltip
                            align="center"
                            :formatter="emptyFormatter"
                        >
                            <template slot-scope="scope">
                                <el-popover
                                    placement="top"
                                    width="240"
                                    trigger="click"
                                    v-if="scope.row.benefit_list.length"
                                >
                                    <div
                                        v-for="(tag, tagIndex) in scope.row.benefit_list"
                                        :key="tagIndex"
                                        style="text-align: center"
                                    >{{ tag.info }}
                                    </div>
                                    <el-button
                                        slot="reference"
                                        type="text"
                                    >
                                        查看
                                    </el-button>
                                </el-popover>
                                <div v-else>--</div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-form
                        :model="ruleForm"
                        :rules="rules"
                        ref="ruleForm"
                        style="margin-top: 20px"
                        :disabled="type === 'detail'"
                    >
                        <el-table
                            :data="[ruleForm]"
                            class="data-table product"
                            @selection-change="handleSelectAll($event)"
                        >
                            <el-table-column
                                type="selection"
                                align="center"
                                width="48"
                                key="0"
                            >
                                <template slot-scope="scope">
                                    <div
                                        v-for="item in scope.row.product_list"
                                        :key="item.product_no"
                                        class="table-item"
                                    >
                                        <el-checkbox
                                            v-model="item.check_status"
                                            :true-label="1"
                                            :false-label="0"
                                            style="margin-bottom: 12px"
                                        />
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="商品规格"
                                width="240"
                                key="1"
                            >
                                <template slot-scope="scope">
                                    <div
                                        class="table-item sku"
                                        v-for="(item) in scope.row.product_list"
                                        :key="item.product_no"
                                        :style="`color:${item.check_status && type === 'edit' ? '#1890FF' : ''};cursor: pointer`"
                                        @click="handleChecked(item)"
                                    >
                                        <el-form-item>
                                            <el-tooltip
                                                effect="dark"
                                                :content="item.goods_specs | filterSpec"
                                                placement="top"
                                            >
                                                <span>{{ item.goods_specs | filterSpec }}</span>
                                            </el-tooltip>
                                        </el-form-item>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="product_price"
                                label="学生价"
                                show-overflow-tooltip
                                align="center"
                                :formatter="emptyFormatter"
                            >
                                <template slot-scope="scope">
                                    <div
                                        class="table-item"
                                        v-for="(item) in scope.row.product_list"
                                        :key="item.product_no"
                                    >
                                        <div style="display: flex; align-items: center;justify-content: center">
                                            <el-form-item>
                                                {{ item.product_price }}
                                            </el-form-item>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="活动价"
                                key="2"
                            >
                                <template slot-scope="scope">
                                    <div
                                        class="table-item"
                                        v-for="(item, index) in scope.row.product_list"
                                        :key="item.product_no"
                                    >
                                        <el-form-item
                                            :prop="`product_list[${index}]`"
                                            :rules="rules.price"
                                        >
                                            <el-input
                                                v-model="item.price"
                                                size="small"
                                                style="width: 162px;"
                                                :disabled="!item.check_status"
                                                @click.native="clickDisableInput(item)"
                                            >
                                                <span
                                                    slot="suffix"
                                                    style="margin-right: 5px"
                                                >元</span>
                                            </el-input>
                                        </el-form-item>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="佣金比例"
                                width="500"
                                key="4"
                            >
                                <template slot-scope="scope">
                                    <el-form-item
                                        prop="commission_rate"
                                        :rules="rules.commission_rate"
                                    >
                                        <el-input
                                            v-model="scope.row.commission_rate"
                                            size="small"
                                            style="width: 162px;"
                                        >
                                            <span
                                                slot="suffix"
                                                style="margin-right: 5px"
                                            >%</span>
                                        </el-input>
                                        <span class="tips">该佣金比例只适用于疯狂星期五活动订单</span>
                                    </el-form-item>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="实际库存"
                                align="center"
                                width="110"
                                key="7"
                            >
                                <template slot-scope="scope">
                                    <div
                                        class="table-item"
                                        v-for="(item) in scope.row.product_list"
                                        :key="item.product_no"
                                    >
                                        <div style="display: flex; align-items: center;justify-content: center">
                                            <el-form-item>
                                                {{ item.product_stock }}
                                            </el-form-item>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form>
                </div>
            </div>
            <div class="submit-view">
                <el-button
                    size="medium"
                    style="width: 120px"
                    @click="handleRoute('crazyFridayGoodsVerify')"
                >
                    返回
                </el-button>
                <el-button
                    type="primary"
                    size="medium"
                    style="width: 120px;margin-left: 24px"
                    v-if="type === 'detail' && !from_type"
                    @click="changeEditStatus"
                >
                    编辑
                </el-button>
                <el-button
                    type="primary"
                    size="medium"
                    style="width: 120px;margin-left: 24px"
                    :loading="loading"
                    v-if="type === 'edit'"
                    @click="handleSubmit"
                >
                    保存
                </el-button>
            </div>
        </div>
        <!-- 图片预览 -->
        <img-preview
            ref="preview"
        />
    </div>
</template>

<script>
import {back} from '@/mixin/back';
import {deepClone} from "@/assets/js/utils";
import ImgPreview from "@/components/common/img-preview";

const numberReg = /(?:^[1-9]([0-9]+)?(?:\.[0-9]{1,2})?$)|(?:^(?:0)$)|(?:^[0-9]\.[0-9](?:[0-9])?$)/;

export default {
    name: 'AdventGoodsAdd',
    mixins: [back],
    components: {ImgPreview},
    data() {
        const validatePrice = (rule, value, callback) => {
            if (value.check_status && !value.price) {
                callback(new Error('请填写活动价'));
            } else if (value.price && !numberReg.test(value.price)) {
                callback(new Error('活动价必须未数字'));
            } else {
                callback();
            }
        };

        return {
            from_type: '',
            type: 'detail',
            sale_no: '',
            requestUrl: '/student/shop_goods_activity_friday_sale%5Cget_depot_goods_list',
            ruleForm: null,
            rules: {
                commission_rate: [
                    {required: true, message: '请输入佣金', trigger: 'blur'},
                    {pattern: numberReg, message: '佣金须为数字', trigger: 'blur'}
                ],
                price: [
                    {validator: validatePrice, trigger: 'blur'}
                ],
            },
            loading: false,
        };
    },
    computed: {},
    watch: {},
    filters: {
        filterSpec(val) {
            if (!val) return '';
            let str = '';

            val.forEach(el => {
                str += el.spec_name + ':' + el.spec_value + '；';
            });
            return str;
        },
        verifyStatusFilter(val) {
            switch (val) {
                case 0:
                    return '待审核';
                case 1:
                    return '已通过';
                case -1:
                    return '未通过';
                case -2:
                    return '取消报名';
                default:
                    return '--';
            }
        },
    },
    mounted() {
        this.init();
    },

    methods: {
        /**
         * 初始化
         */
        init() {
            let query = this.$route.query;

            this.$store.commit('SET_HEADER', [{title: "APP后台"}, {title: '商城'}, {title: '活动管理'},
                {title: '疯狂星期五', path: '/student/crazy-friday-goods-verify'},
                {title: `${this.type === 'edit' ? '编辑商品' : '查看商品'}`}]);
            this.authResult = this.$route.meta.authResult;
            this.type = query.type;
            this.sale_no = query.sale_no;
            this.from_type = query.from_type || '';
            if (query.sale_no) {
                this.getDetail(query.type);
            }
        },

        /**
         * @description 获取详情
         */
        getDetail() {
            this.$post('/student/shop_goods_activity_friday_sale%5Cget', {sale_no: this.sale_no}, resp => {
                if (resp.code === 1) {
                    this.ruleForm = resp.data;
                } else {
                    this.$notify({
                        title: '提示',
                        type: 'warning',
                        message: resp.msg
                    });
                }
            });
        },

        /**
         * 路由跳转
         * @param routeName
         * @param query
         */
        handleRoute(routeName, query) {
            this.$router.push({
                name: routeName,
                query
            });
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        },

        /**
         * 预览图片
         * @param   {String}    images      //单图预览
         * @param   {Array}     images      //多图预览
         * @param index
         */
        fnShowPreview(images, index) {
            if (images && Object.prototype.toString.call(images) == '[object String]') {
                this.$refs.preview.show([
                    images
                ]);
            } else if (images && Object.prototype.toString.call(images) == '[object Array]') {
                this.$refs.preview.show(images, index);
            } else {
                this.$message({
                    type: 'warning',
                    message: '图片类型错误'
                });
            }
        },

        /**
         * 点击禁用的input
         * @param row
         */
        clickDisableInput(row) {
            if (!row.check_status) {
                this.$message.warning('请勾选该规格');
            }
        },

        /**
         * 全选
         * @param selection
         * @param index
         */
        handleSelectAll(selection, index) {
            this.ruleForm.product_list.forEach(item => {
                this.$set(item, 'check_status', selection.length ? 1 : 0);
            });
        },

        /**
         * 提交
         */
        handleSubmit() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    let params = deepClone(this.ruleForm);

                    params.product_list_json = JSON.stringify(params.product_list);
                    delete params.product_list;
                    this.$post('/student/shop_goods_activity_friday_sale%5Cupdate_goods', params, resp => {
                        if (resp.code === 1) {
                            this.handleRoute('crazyFridayGoodsVerify');
                            this.$notify({
                                title: '提示',
                                type: 'success',
                                message: '保存成功'
                            });
                        } else {
                            this.$notify({
                                title: '提示',
                                type: 'warning',
                                message: resp.msg
                            });
                        }
                        this.loading = false;
                    });
                }
            });
        },

        /**
         * 点击规格选中当前规格
         * @param skuItem
         */
        handleChecked(skuItem) {
            if (this.type === 'edit') {
                this.$set(skuItem, 'check_status', skuItem.check_status ? 0 : 1);
            }
        },

        /**
         * 切换编辑状态
         */
        changeEditStatus() {
            this.getDetail('edit');
            this.type = 'edit';
        }
    }
};
</script>

<style lang="less" scoped>
.wrapper {
    width: 100%;

    .content-wrapper {
        display: flex;
        height: calc(100% - 24px);
        flex-direction: column;
        margin: 12px;
        box-sizing: border-box;

        .submit-view {
            width: 100%;
            height: 68px;
            background: #FFFFFF;
            box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.1);
            position: absolute;
            bottom: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            padding-left: 210px;
        }

        /*header*/

        .header {
            background: #FFFFFF;
            box-sizing: border-box;
            box-shadow: 0px -1px 0px 0px #F0F2F5;
            display: flex;
            flex-direction: column;
            border-bottom: 1px solid #EBEEF5;

            .header-title {
                font-size: 16px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                height: 56px;
                position: relative;
                display: flex;
                align-items: center;
                padding: 0 32px;
            }
        }

        // 表格
        .data-table {
            ::-webkit-scrollbar {
                width: 6px;
                height: 6px;
            }

            // 操作按钮
            .option-btn-group {
                .el-button {
                    margin-left: 0;
                    margin-right: 10px;
                }
            }
        }

        /*商品列表*/

        .goods-wrapper {
            background: #fff;
            padding-bottom: 68px;

            &__header {
                height: 68px;
                font-size: 16px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                line-height: 16px;
                padding: 0 32px;
                display: flex;
                align-items: center;

                &.status {
                    font-size: 14px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #333333;
                    .danger {
                        color: #F95B56;
                    }
                    .success {
                        color: #2FBDB3;
                    }
                    .normal {
                        color: #999;
                    }
                }
            }

            &__content {
                padding: 0 32px 20px;

                .table-item {
                    margin: 16px 0;
                    height: 50px;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    &.sku {
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        -webkit-line-clamp: 2;
                    }
                }

                .goods-info {
                    display: flex;
                    align-items: center;

                    .goods-cover {
                        width: 68px;
                        height: 68px;
                        cursor: pointer;
                        margin-right: 16px;
                        flex-shrink: 0;
                    }

                    .info {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        font-size: 12px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;

                        .goods-info__title {
                            font-size: 14px;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                            -webkit-line-clamp: 2;
                        }
                    }
                }
            }
            .tips {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                margin-left: 10px;
            }
        }
    }

    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow: 0 1px 0 0 rgba(233, 233, 233, 1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;

        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }

        .el-icon-close:before {
            color: rgb(194, 194, 194);
            font-size: 17px;
            font-weight: bold;
        }

        .el-dialog__headerbtn {
            top: 14px;
        }
    }

    /deep/ .el-textarea__inner {
        resize: none;
    }

    /deep/ .el-form-item__error {
        padding-top: 0;
    }

    /deep/ .el-form-item {
        margin-bottom: 12px;
    }

    /deep/ .el-table.product {
        background: #FBFBFB !important;

        .el-table__body-wrapper {
            padding-top: 12px;
        }
    }

    .dialog-footer {
        display: flex;
        justify-content: center;
    }
}
</style>
<style lang="less">
.wrapper.crazy-friend-goods-edit {
    .el-table {
        th {
            background: #f2f2f2 !important;
        }

        td {
            background: #FBFBFB !important;
            border-bottom: 0;
        }
    }
}
</style>
